<template>
	<view class="flex-col page">
		<view class="flex-col self-stretch">

			<view class="flex-row items-baseline tabs">
				<text @click="changeTabs(index)" class="tabs-item" :class="current == index ? 'text' : 'text_2'"
					v-for="(item,index) in tabsList" :key="index">{{item}}</text>
			</view>
			<!-- 任务 -->
			<view class="flex-col self-stretch list" v-if="current == 0">
				<view class="flex-col list-item mt-15" v-for="(item, index) in taskList" :key="index">
					<view class="flex-row justify-between items-start">
						<view class="flex-row items-center group_2">
							<image class="shrink-0 image_5" src="/static/jihua_list_icon.png" />
							<text class="font_title ml-2-5">{{item.title}}</text>
						</view>
						<view v-if="item.status == 1" class="flex-col justify-start items-center ">
							<image class="text-wrapper" src="../../static/jihua_status_ed.png" mode=""></image>
						</view>
						<view v-if="item.status == 0" class="flex-col justify-start items-center text-wrapper">
							<image class="text-wrapper" src="../../static/jihua_status_ing.png" mode=""></image>
						</view>
					</view>
					<view class="flex-row justify-between items-end group_3">
						<view class="flex-row items-center">
							<text class="font_3">{{item.month}}</text>
							<text class="font_2">月</text>
							<text class="font_3">{{item.day}}</text>
							<text class="font_2">日</text>
							<text class="font_3 text_6">{{item.time}}</text>
						</view>
						<image class="image_6" src="/static/jihua_arrow_right_gray.png" />
					</view>
					<view class="flex-row group_4 items-center">
						<text class="font_4">完成：</text>
						<u-rate :count="count" active-color="#ffcf58" inactive-color="#cdd3da" inactive-icon="star-fill"
							:disabled="true" v-model="item.starFinish"></u-rate>
					</view>
					<view class="flex-row items-center group_5">
						<text class="font_4">结果：</text>
						<u-rate :count="count" active-color="#ffcf58" inactive-color="#cdd3da" inactive-icon="star-fill"
							:disabled="true" v-model="item.starResult"></u-rate>
					</view>
				</view>
			</view>

			<!-- 提醒 -->
			<view class="flex-col self-stretch list1" v-if="current == 1">
				<view class="flex-col list-item1 mt-15" v-for="(item, index) in remindList" :key="index">
					<view class="remind-top flex-row items-center">
						<image class="clock-img" src="/static/remind-clock.png" mode=""></image>
						<view class="remind-title">
							{{item.title}}
						</view>
					</view>
					<view class="flex-row justify-between">
						<view class="remind-time">
							{{item.time}}
						</view>
						<view class="flex-row items-end">
							<u-switch v-model="item.status" active-color="#2ee69c" inactive-color="#b2b9c2"></u-switch>
						</view>

					</view>


				</view>
			</view>
		</view>
		<!-- 添加 -->
		<view class="flex-col justify-start items-center self-end section_3">
			<image @click="toAdd" class="image_10" src="/static/jihua_add.png" />
		</view>
		<view v-if="current == 1" class="flex-row justify-between items-center bottom">
			<view class="task-button">
				提醒
			</view>
			<view class="remind-button">
				任务
			</view>
		</view>
		<!-- 底部 tabbar -->
		<!-- <view class="page-bottom">
			<tabbar @callback="callback"></tabbar>
		</view> -->
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue"

	export default {
		data() {
			return {
				count: 5,
				value: 2,
				taskList: [{
						title: '参加少儿组篮球比赛',
						month: '6',
						day: '24',
						time: '15:30',
						starFinish: 3,
						starResult: 5,
						status: 1, //已完成
					},
					{
						title: '去学校参加期末家长会',
						month: '7',
						day: '15',
						time: '16:00',
						starFinish: 0,
						starResult: 0,
						status: 0, //进行中
					}
				],
				tabsList: ['任务', '提醒'],
				current: 0,
				remindList: [{
						title: '上英语课',
						time: '18:00',
						status: false, //未设置
					},
					{
						title: '上奥数网课',
						time: '19:10',
						status: true, //设置
					}
				]

			}
		},
		components: {
			tabbar
		},
		onLoad(options) {


		},
		onShow() {
			uni.hideTabBar()
		},
		methods: {
			callback() {},
			changeTabs(index) {
				this.current = index
			},
			toAdd(){
				if(this.current == 0){
					uni.navigateTo({
						url: "/pages/addTask/index"
					})
				}
				if(this.current == 1){
					uni.navigateTo({
						url: "/pages/addPlan/index"
					})
				}
				
			}
		}

	}
</script>

<style>
	@import url('../../common/css/common.css');

	.ml-15-5 {
		margin-left: 31rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.mt-153 {
		margin-top: 306rpx;
	}

	page {
		background-color: #f0f5ff;
		height: 100vh;
	}

	.page {
		background-image: url('../../static/jihua_bg.png');
		background-size: 100% 1000rpx;
		background-repeat: no-repeat;
		height: 100%;
	}


	.tabs {
		margin-left: 46rpx;
		margin-top: 49rpx;
	}

	.tabs-item:nth-child(2) {
		margin-left: 31rpx;
	}

	

	.text {
		color: #222222;
		font-size: 52rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 49rpx;
		position: relative;
	}

	.text::after {
		position: absolute;
		content: "";
		width: 50rpx;
		height: 15rpx;
		background-image: url("../../static/jihua_tabs_bottom.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		bottom: -26rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	.text_2 {
		color: #616274;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
		opacity: 0.7;
	}


	.list {
		width: 652rpx;
		margin: 0 auto;
		margin-top: 62rpx;
	}

	.list-item {
		border-radius: 36rpx;
		background: #eff5fe;
		box-shadow: 0 0 35rpx 11rpx #b8cbf840;
		padding: 4rpx 4rpx 28rpx 28rpx;
		filter: drop-shadow(0rpx 0rpx 34.96rpx #b8cbf840);
		border-radius: 36rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_2 {
		margin-top: 33rpx;
		width: 70%;
	}

	.image_5 {
		width: 54rpx;
		height: 54rpx;
	}

	.font_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		font-weight: 500;
		color: #171832;
		width: 100%;
	}

	.font_2 {
		font-size: 32rpx;
		line-height: 34rpx;
		font-weight: 600;
		font-family: DIN Alternate;
		color: #171832;
	}

	

	.text-wrapper {
		width: 108rpx;
		height: 48rpx;
	}

	.font {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #ffffff;
	}

	

	.group_3 {
		margin-top: 16rpx;
		padding-left: 58rpx;
		padding-right: 18rpx;
	}

	.font_3 {
		font-size: 44rpx;
		font-family: DIN Alternate;
		line-height: 33rpx;
		font-weight: 700;
		color: #171832;
	}


	.text_6 {
		margin-left: 20rpx;
	}

	.image_6 {
		width: 9rpx;
		height: 16rpx;
	}

	.group_4 {
		margin-top: 24rpx;
		padding: 0 61rpx;
	}

	.font_4 {
		font-size: 25rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		color: #83888f;
	}



	.group_5 {
		padding: 0 62rpx;
	}

	.section_3 {
		position: fixed;
		right: 34rpx;
		bottom: 192rpx;
	}



	.image_10 {
		width: 126rpx;
		height: 126rpx;
	}




	/* 提醒 */
	.list1 {
		width: 652rpx;
		margin: 0 auto;
		margin-top: 47rpx;
	}

	.list-item1 {
		width: 652rpx;
		height: 220rpx;
		border-radius: 36rpx;
		background: #eff5fe;
		box-shadow: 0 0 35rpx 11rpx #b8cbf840;
		padding: 34rpx 20rpx 14rpx 30rpx;
	}

	.clock-img {
		width: 54rpx;
		height: 54rpx;
	}

	.remind-time {
		font-size: 72rpx;
		color: #1C335C;
		font-weight: 700;
		padding-left: 50rpx;
	}

	.remind-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #1C335C;
	}

	.bottom {
		width: 695rpx;
		margin: 0 auto;
		position: fixed;
		left: 50%;
		bottom: 31.5rpx;
		transform: translateX(-50%);
	}

	.task-button {
		width: 333rpx;
		height: 91rpx;
		border-radius: 44rpx;
		background: linear-gradient(-90deg, #bfbdff, #b8e2ff);
		text-align: center;
		line-height: 91rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #1C335C;
	}

	.remind-button {
		width: 333rpx;
		height: 91rpx;
		border-radius: 44rpx;
		background: linear-gradient(-90deg, #bfbdff, #b8e2ff);
		text-align: center;
		line-height: 91rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #1C335C;
	}
</style>